<!DOCTYPE html>
<html lang="pt-BR">
	<head>
      <meta charset="utf-8"/>
      <title>Criando efeito de navegação single page, scroll apenas com CSS3 - Desenvolvimento, Julio Lira(Jul10l1r4)</title>	
      <!--link rel="icon" type="image/png" href="img/favicon.png" /-->
      <meta name="viewport" content="width=device-width, user-scalable=no"/>
      <link rel="stylesheet" href="https://jul10l1r4.github.io/Texto-farmatacao/principal.css"/>
			<meta name="theme-color" content="#AA9780">
			<link rel="icon" href="../../assets/jl.png" />
      <link rel="stylesheet" href="../../css/layout.css"/>
      <meta name="author" content="Julio Lira"/>
      <meta name="robots" content="index, follow">
      <meta property="og:site_name" content="https://jul10l1r4.github.io/" />
      <meta property="og:url" content="https://jul10l1r4.github.io/artigos/scroll-com-uma-linha-css/" />
<!-- Edite essas informações após o termino doo artigo -->
      <meta name="description" content="Você já entrou em um site afim de comprar, ler algo ou resolver algum problema como sacar dinheiro né?! E eu tenho certeza que se você estava apressado e se o site era lento, você sentiu uma grande vontade de desistir"/>
      <meta name="keywords" content="segurança, security,sec, osec,roadsec,hack,hacking,pentest,web, invasion,RE,Julio Lira,http, https, erro, error, mensagem, criar, 404, html, php, c, css, javascript, java, go, python, haskell, git, not a bug, jul10l1r4, Julio Lira, br, zueira, memes, meme, mene, risos, rs, huehuehue, kkk, kkkkkkj, perdi a criatividade kkdkd, http, http meme resposta, api meme, api resposta, rootthings, root things, rootings"/>
      <meta property="og:title" content="Efeito de rolagem suave em seis linhas sem Jquery">
      <meta property="og:image" content="use.jpeg"/>
      <meta property="og:description" content="Você já entrou em um site afim de comprar, ler algo ou resolver algum problema como sacar dinheiro né?! E eu tenho certeza que se você estava apressado e se o site era lento, você sentiu uma grande vontade de desistir"/>
      <meta property="og:author" content="Julio Lira"/>
  <!-- Edite essas tbm -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Efeito de rolagem suave em seis linhas, sem Jquery">
  <meta name="twitter:description" content="Você já entrou em um site afim de comprar, ler algo ou resolver algum problema como sacar dinheiro né?! E eu tenho certeza que se você estava apressado e se o site era lento, você sentiu uma grande vontade de desistir">
  <meta name="twitter:image" content="use.jpeg">
			<script src="../../Ecmascript/analiz.js"></script>
			<script defer src="../../Ecmascript/scroll.js"></script>
<!-- Edite essas tbm --->
	<script type="application/ld+json">
{
	"name":"Criando efeito scroll de navegação single page apenas com uma linha de css",
	"description":"Você já entrou em um site afim de comprar, ler algo ou resolver algum problema como sacar dinheiro né?! E eu tenho certeza que se você estava apressado e se o site era lento, você sentiu uma grande vontade de desistir",
	"author":"Julio Lira",
	"@type":"Organization",
	"url":"https://jul10l1r4.github.io/artigos/background-em-texto/",
	"image":"https://instagram.fnat2-1.fna.fbcdn.net/vp/c86b9975b58d82a3e5ea3526131a8d2a/5B146E0F/t51.2885-15/e35/26868816_181404315800705_76975572110016512_n.jpg",
	"headline":"Julio Lira",
  "@context":"http://schema.org",
  "contactPoint": {
					"@type": "ContactPoint",
					"email": "jul10l1r4@ufrn.edu.br"
				}
}
		 </script>
			
    </head>
    <body>
			<header class="dev" id="top" title="Clique aqui para rolar a página ao artigo">
				<div id="to">
			    <h1>Criando efeito de navegação single page, scroll apenas com CSS3
						<!--img src="https://emojipedia-us.s3.amazonaws.com/thumbs/160/facebook/111/smirking-face_1f60f.png"/-->
					</h1>
				</div>
			</header>
			<a id="down" href="#conteudo">Scroll de forma prática</a>
			<section class="medium-text">
				<h1 id="conteudo">Conheça</h1>
				<p>
				 Já ouviu falar em scroll? nossa essa pergunta parece meio idiota ne?! mas é um efeito de deslizamento em rolagem de tela… eu sei como 
				eu falei pode até bugar sua compreensão, mas dá uma sacada nesse site 
				<a href="https://jul10l1r4.github.io/HTTP_-_Resposta/" target="_blank">aqui</a>,
			 ele é uma api que usamos para gerenciar mensagens de erros.
				</p>
				<h1>Como baseia-se?</h1>
				<p>
					Esse efeito viralizou por volta de 2015 em boa parte da web, criaram vários artigos bem legais falando do efeito, e equipes que trabalham com psicologia cada vez mais apoiava a criação deste efeito, e mostrava os seus diversos pontos positivos.
				</p> 
				<p>
					Ele é um calculo de medidas, através de valores de posições do eixo <code>x</code> e eixo <code>y</code>, tem valores em Javascript
					onde ele ajuda bastante nisso, como o valor que captura a posição e retorna o valor em pontos, no qual é útil e a função que move o 
					scroll até determinado ponto, 
					isso causa este efeito, mas como notou a grande dificuldade e o nível de complexidade, as pessoas optaram por usar bibliotecas e/ou 
					frameworks para isso, como o <a href="https://www.origamid.com/codex/scroll-suave-para-link-interno/" target="_blank">Jquery</a>
					ou o <a href="https://www.npmjs.com/package/angular-scroll" target="_blank">Angular-scroll</a>.
				</p>
				<figure>
					<img src="licao.jpeg" alt="Meme: Ah que chato, agora ele está me dando uma lição de moral!"/>
					<figcaption>Mas gente...</figcaption>
				</figure>
				<p>
					O uso delas ainda hoje é bastante comum e fácil, mas iremos usar aqui apenas css, então prepare-se para os bilhões de códigos 
					<span class="emoj">😅</span>
				</p>
				<h1>Show me the code <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/60/twitter/86/sign-of-the-horns_1f918.png" alt="Mão de rock"/></h1>

				<p>
					Mas sim, concordo que realmente é e sim fica bem simples usar através dessas bibliotecas para criar tanto esse quanto outros efeitos legais no frontend.
				</p>
				<hr/>
				<p>
					Acho que pode reduzir um pouco suas linhas de códigos...
				</p>
				<figure>
					<img src="vcqrrir.jpeg" alt="Meme: Aí vc quer rir"/>
					<figcaption>Na real… você vai diminuir muito o seu código!</figcaption>
				</figure>
				<figure>
					<script src="https://gist.github.com/Jul10l1r4/c192d7dd116b14e7d4d172f5ee4f4aad.js"></script>
					<figcaption>Super códigos, exaustivos, cansativos enormes … Só que não.</figcaption>
				</figure>
				<p>
					É, eu não estou louco e nem você por acreditar nisso, mas é verdade, a mozila montou uma documentação bem detalhada de seu funcionamento
				 aqui na 
					<a href="https://developer.mozilla.org/pt-BR/docs/Web/CSS/scroll-behavior" target="_blank">MDN</a> e em português, eu fiquei abismado
					ao saber disso, para usar em seu código basta você colocar algum link na própria página e, fim.
				</p>
				<h1>A grande bad</h1>
				<p>
					Eu fiquei full animado com tudo isso, mas fui verificar e fazer testes, até que me deparei com a informação que o navegador Google Chrome havia tirado o suporte deste recurso em CSS, na real… eu esperava isso do Explorer, do Edge ou sei lá… mas não do Google Chrome.
				</p>
				<p>
					Espero que ele venha criar um suporte pra isso, afinal ele é usado por aproximadamente 58% da internet.
				</p>
				<figure>
					<div id="all-browser-ww-monthly-201702-201802" width="100%" height="400" style="width:600px; height: 400px;"></div>
					<!-- You may change the values of width and height above to resize the chart -->
					<p>Source: <a href="http://gs.statcounter.com/">StatCounter Global Stats - Browser Market Share</a>
					</p><script type="text/javascript" src="https://www.statcounter.com/js/fusioncharts.js"></script>
					<script type="text/javascript" src="https://gs.statcounter.com/chart.php?all-browser-ww-monthly-201702-201802&chartWidth=600"></script>
					</div>
					<figcaption>
						E infelizmente ele é o browser mais usado.
					</figcaption>
				</figure>
				<p>
					Mas fiz um outro artigo, mostrando como é possível fazer esse efeito usando o JS para o Google chrome (no caso o que não suporta, mas 
					essa forma é funciona em todos os browsers), usando 
					apenas seis linhas de puro JS, <a href="https://jul10l1r4.github.io/artigo/Seja_performatico_-_efeito_scroll_com_6_linhas_sem_jquery/"
					target="_blank">veja aqui</a>.
				</p>
				
			</section>
			<footer class="separador-top top6">
       <br/>
				<a href="https://jul10l1r4.github.io/artigo/background-em-texto/index.html" target="_blank">
					← Background em texto com CSS 
				</a>
        |
				<a href="https://jul10l1r4.github.io/POP-image/index.html" target="_blank">
					Ir para POP image 🤘 →
				</a>
			</footer>
    </body>
  </html>			
